import React, { useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';

import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';
import { getSignature } from './api/wecode';
import store from './store';
import history from './history';
import Home from './routes/Home';
import Pic from './routes/Media/pic';
import Auth from './routes/Auth';
import Location from './routes/Location';
import Device from './routes/Divece';

function App() {
  useEffect(() => {
    getSignature(window.location.href).then((res) => {
      const { data } = res;
      window.HWH5.config({
        ...data,
        jsApiList: [
          'chooseImage',
          'uploadImage',
          'getAuthCode',
          'getLocation',
          'getDeviceInfo',
          'getAppInfo',
          'getNetworkType',
        ],
      });
      /* 如果鉴权成功，会执行ready方法，把需要在页面加载时调用的相关接口放在ready中确保执行。
            需要用户触发时才调用的接口，则直接调用，不需要放在ready函数中。 */
      window.HWH5.ready(() => {
        console.log('鉴权成功---');
      });

      // 如果鉴权失败，则调用error方法
      window.HWH5.error((err: any) => {
        console.log('鉴权失败---', err);
      });
    });
  });

  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <main className="main-container">
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/pic" exact component={Pic} />
            <Route path="/auth" exact component={Auth} />
            <Route path="/location" exact component={Location} />
            <Route path="/device" exact component={Device} />
          </Switch>
        </main>
      </ConnectedRouter>
    </Provider>
  );
}

export default App;
